Vue.JS且戰且飛(八)

2017 iT 邦幫忙鐵人賽

DAY 8

Modern Web

Vue.JS且戰且飛系列第 8 篇

2017鐵人賽 vue.js eagle 老鷹且戰且飛

老鷹(eagle)

2016-12-09 21:50:54

1651 瀏覽

分享至

功能抽出(1)

jsfiddle

<html>
<head>
    <meta charset="utf-8">
    <title>功能抽出(1)</title>
</head>
<body>
<div id="show">
    <ol>
    <!--    for把row傳入子區塊,詳細樣式為 template: '<li>{{ row.name }}</li>'  -->
        <item-show v-for="row in list" v-bind:row="row"></item-show>
    </ol>
</div>
</body>
<script src="vue.js"></script>
<script>
    //子區塊
    Vue.component('item-show', {
        props: ['row'],
        template: '<li>{{ row.name }}</li>'
    });
    //主區塊
    new Vue({
        el: '#show',
        data: {
            list: [
                {name: '老鷹'},
                {name: '泰大'},
                {name: '小雨大'},
                {name: '總裁'},
                {name: '賽大'},
                {name: '克拉克'},
                {name: '胖達'}
            ]
        }
    })
</script>
</html>